<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <div>
        <button @click="getData">查看about中数据</button>
        <button @click="getAboutChildRef">使用ref查看子组件</button>
        <div>a1为{{ a1 }}</div>
      </div>
      <div>=========================================================================</div>
      <div>
        <button @click="changeNum">改变num的值</button>
        <div>num为{{ num }}</div>
        <div>computedNum为{{ computedNum }}</div>
      </div>
      <div>
        <div class="title">v-for列表：</div>
        <div v-for="item in vForlist" :key="item.id">{{ item.id }}:{{ item.content }}</div>
      </div>
      <div>
        <div class="title">表单输入绑定与监听</div>
        <input v-model="inputValue" type="text" name="" id="">
      </div>

    </div>
    <div>
      <div>传给aboutChild的值:{{ childData }}</div>
      <button @click="changeChildData">改变传给子组件的值</button>
      <aboutChild ref="aboutChildRef" :childData="childData" @childChange="childChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import aboutChild from "@/components/grandChild/aboutChild.vue"
import { ref, reactive, computed, Ref, watch, onMounted } from 'vue'
import type { vForType } from "./type"




const a1 = ref('a1')
const a2 = ref({ a: 1, b: 'string' })//返回ref对象，ref对象.value为proxy对象，
const a3 = reactive({ a: 1, b: 'string' })//返回proxy对象

const num: Ref<number> = ref(0);
const computedNum = computed<number>(() => {
  return num.value * 2
})


const vForlist: vForType[] = reactive([
  {
    id: 1,
    content: "1111111111111"
  },
  {
    id: 2,
    content: "2222222222222"
  },
])


const inputValue: Ref<string | Number> = ref("11122")
//监听单个数值
watch(inputValue, (newinputValue, oldinputValue) => {
  console.log(oldinputValue, 'oldinputValue')
  console.log(newinputValue, 'newinputValue')
})
//同时监听多个数据
watch([num, inputValue], (arr) => {
  console.log('新数组:' + arr)
})


const aboutChildRef = ref<HTMLElement | any>(null)


const childData = ref("传给aboutChild的值111111111111")



function getData(): void {
  console.log(a1, 'a1')
  console.log(a2.value, 'a2')
  console.log(a3, 'a3')
}

function changeNum(): void {
  num.value++
}

function changeChildData(): void {
  childData.value = "被改变过传给子组件的值22222222222222"
}

function childChange(val: any): void {
  childData.value = val
}

function getAboutChildRef() {
  console.log(aboutChildRef, 'aboutChildRef')
  console.log(aboutChildRef.value?.exprotData, 'aboutChildRef')

}

onMounted(() => {
  console.log(window)
})

</script>
<style>
.title {
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
}
</style>
